<template>
  <StatisticBox />
  <el-row style="height: 3rem;" :gutter="0">
    <el-col :span="8">
      <PieChart :props-option="option1" />
    </el-col>
    <el-col :span="8">
      <PieChart :props-option="option2" />
    </el-col>
    <el-col :span="8">
      <PieChart :props-option="option3" />
    </el-col>
  </el-row>
  <el-row style="height: 3rem;">
    <el-col :span="8">
      <PieChart :props-option="option4" />
    </el-col>
    <el-col :span="8">
      <PieChart :props-option="option5" />
    </el-col>
    <el-col :span="8">
      <UpdateLog />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import UpdateLog from '@/components/UpdateLog.vue'
import PieChart from '@/components/charts/PieChart.vue'
import StatisticBox from '@/components/charts/StatisticBox.vue'

const option1 = {
  text: '瓦片',
  subtext: '已收录大地图瓦片',
  data: [
    { value: 21760, name: '原神' },
    { value: 49149, name: '激战2' },
  ]
}
const option2 = {
  text: '标点',
  subtext: '已收录大地图的标点',
  data: [
    { value: 161, name: '原神' },
    { value: 3040, name: '激战2' },
  ]
}
const option3 = {
  text: '地区名称',
  subtext: '已收录地区',
  data: [
    { value: 153, name: '原神' },
    { value: 69, name: '激战2' },
  ]
}
const option4 = {
  text: '标点类型',
  subtext: '原神地图的标点类型',
  data: [
    { value: 66, name: '风神瞳' },
    { value: 56, name: '秘境' },
    { value: 37, name: '七天神像' },
    { value: 2, name: '传送锚点' },

  ]
}
const option5 = {
  text: '标点类型',
  subtext: '激战2地图的标点类型',
  data: [
    { value: 1344, name: '探索点' },
    { value: 614, name: '传送点' },
    { value: 418, name: '观景点' },
    { value: 372, name: '爱心任务' },
    { value: 268, name: '技能点' },
    { value: 18, name: '副本' },

  ]
}
</script>

<style scoped lang="less">
.el-row {
  padding: 20px;
}
</style>
